<template>
  <div>
    <Card>
      <Tabs type="card" @on-click="changeTab">
        <TabPane :label="'保单：' + tabname" :name="tabname"></TabPane>
      </Tabs>
      <Timeline v-for="(serviceRecord1, index) in serviceRecord" :key="index">
        <TimelineItem v-for="(item, index) in serviceRecord1" :key="index">
          <!-- :color="item.facecontent==='1'?'yellow':''" -->
          <div class="modalTitle">
            <Row gutter="10">
              <i-col span="6">
                <span>工作日期：</span>
                <span>{{ item.updateTime }}</span>
              </i-col>
              <i-col span="5">
                <span>工作方式：</span>
                <span class="gray">{{
                  item.worktype ? item.worktype : ""
                }}</span>
              </i-col>
            </Row>
          </div>
          <div class="modalContent">
            <Row gutter="5">
              <i-col span="5">
                <span>处理人：</span>
                <span>{{ item.workname ? item.workname : "" }}</span>
                <Button
                  type="default"
                  size="small"
                  class="waiqin"
                  style="border: 1px solid #1890ff"
                >
                  <span style="font-size: 12px; color: #1890ff">{{
                    item.role
                  }}</span>
                </Button>
              </i-col>
            </Row>
            <div class="reasonDetail">
              <span>工作结果记录</span>
            </div>
            <div
              class="reasonDetail"
              style="word-break: break-all; word-wrap: break-word"
            >
              <span class="gray">{{ item.workresult }}</span>
            </div>
            <div class="reasonDetail" v-if="item.address">
              <span>打卡位置 :</span>
              <span class="gray">{{ item.address }}</span>
            </div>
            <div class="reasonDetail">
              <Button
                v-if="item.recordingaddress"
                type="success"
                size="small"
                class="waiqin"
                @click="phoneRecordShow(item)"
                >电话录音</Button
              >
              <Modal
                footer-hide="true"
                :value="phoneRecord"
                :mask-closable="false"
                :closable="false"
                width="530"
                :styles="{ top: '200px' }"
              >
                <span slot="header" style="color: #fff; font-size: 14px"
                  >电话录音下载</span
                >
                <Table
                  :columns="phoneRecordColumns"
                  :data="phoneRecordData"
                  border
                >
                  <template slot-scope="{ row }" slot="opration">
                    {{ row.opration }}
                    <Button
                      type="success"
                      size="small"
                      style="
                        border-radius: 12px;
                        padding-left: 20px;
                        padding-right: 20px;
                      "
                      @click="downloadPhoneRecord(row.id)"
                      >下载</Button
                    >
                  </template>
                </Table>
                <Button
                  type="primary"
                  @click="modalVisibleChange3"
                  style="float: right; margin-top: 20px"
                  >返回</Button
                >
                <div class="clearBoth"></div>
              </Modal>
            </div>
            <div class="reasonDetail">
              <span>
                <Button
                  v-if="item.facecontent"
                  type="success"
                  size="small"
                  class="waiqin"
                  @click="interviewShow(item)"
                >
                  {{
                    item.evaluateflag === "Y"
                      ? "面访联系-评鉴表图片"
                      : "面访联系图片"
                  }}
                </Button>
              </span>
              <span>
                <Button
                  v-if="item.surveyflag == '1'"
                  type="success"
                  size="small"
                  class="waiqin"
                  @click="questionRecord(item)"
                  >调查问卷</Button
                >
              </span>
            </div>
            <!-- 面访联系图片对话框  -->
            <Modal
              footer-hide="true"
              :value="interviewModal"
              :mask-closable="false"
              :closable="false"
              width="720"
              :styles="{ top: '150px' }"
            >
              <span slot="header" style="color: #fff; font-size: 14px"
                >面访联系图片</span
              >
              <div>
                <Table
                  :columns="interviewColumns"
                  :data="interviewData1"
                  border
                >
                  <template slot-scope="{ row }" slot="opration">
                    {{ row.opration }}
                    <Button
                      type="success"
                      size="small"
                      style="
                        border-radius: 12px;
                        padding-left: 20px;
                        padding-right: 20px;
                      "
                      @click="downloadInterview(row.id)"
                      >下载</Button
                    >
                  </template>
                </Table>
              </div>
              <div class="imgmodal">
                <div
                  class="recordcon"
                  v-for="(item, index) in interviewData2"
                  :key="index"
                >
                  <div class="imgout">
                    <img
                      class="recordimg"
                      :src="item.photoUrl"
                      alt=""
                      @click="biggerimg(item.photoUrl)"
                    />
                  </div>
                  <div class="recordimgname">{{ item.path }}</div>
                  <span>{{ item.createTime }}</span>
                </div>
              </div>
              <Button
                type="primary"
                @click="modalVisibleChange6"
                style="float: right; margin-top: 20px"
                >返回</Button
              >

              <div class="clearBoth"></div>
            </Modal>
            <Modal
              footer-hide="true"
              :value="biggerFlag"
              :mask-closable="false"
              :closable="false"
              width="100vw"
              height="100vh"
              :styles="{ top: '0' }"
              class="biggerShow"
            >
              <Button
                type="primary"
                @click="biggerimgclose"
                style="float: right; margin-top: 10px"
                >返回</Button
              >
              <br />
              <div class="maskshow">
                <img
                  class="biggerimgshow"
                  :src="biggerPath"
                  alt=""
                  title="如需下载请右击"
                />
              </div>
            </Modal>
            <!-- 点评 -->

            <div style="margin-top: 10px">点评信息</div>
            <div class="reasonDetail" v-if="item.careCommentVOS">
              <div v-for="(ti, index) in item.careCommentVOS" :key="index">
                <span>{{ ti.commentname }}点评：</span>
                <Rate v-model="ti.level" disabled />
                <span class="gray">{{ ti.comment }}</span>
                <span style="margin: 0 10px">{{ ti.createTime }}</span>
                <Button
                  type="error"
                  v-if="ti.commentname == username"
                  class="waiqin"
                  @click="delRate(ti.id)"
                  >删除</Button
                >
              </div>
            </div>
            <div
              class="reasonDetail"
              v-if="!item.careCommentVOS || item.careCommentVOS == null"
            >
              <span>上级点评：</span>
              <Rate v-model="superiorReview" disabled />
              <span class="gray">未评价</span>
            </div>
          </div>
        </TimelineItem>
      </Timeline>
    </Card>
  </div>
</template>
<script>
import { exportFile } from "../../../util/util";
export default {
  data() {
    return {
      interviewModal: false,
      //tab标题
      tabname: "",
      serviceRecord: [],
      phoneRecord: false,
      phoneRecord: false,
      messageContent: false,
      action1: "",
      action2: "",
      credentials: "",
      uploadLoading: false,
      uploadLoading2: false,
      fileIndex1: 0,
      fileIndex2: 0,
      tabIndex: 1,
      consoleIndex: 1,
      chargeRadio: "",
      reDatedisabled: true,
      chargeDifficultDisabled: false,
      couMoneyDisabled: false,

      msgList: [],
      noticeMsg: "",
      sendFlag: true,
      callBtnDisabled: false,
      // messageBtnDisabled: false,
      assignContNoNotnull: true,
      remainMessageCount: 0,
      persontype: null,
      callModalShow: false,
      callIndex: "",
      // 电话录音表格
      phoneRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "名称",
          key: "recordingaddress",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      phoneRecordData: [],
      // 面访联系表格
      interviewColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "名称",
          key: "path",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      interviewData: [],
      interviewData1: [],
      interviewData2: [],
      internetData: [],
      userCode: "",
      biggerFlag: false,
      biggerPath: "",
      username: "",
    };
  },
  methods: {
    changeTab(name) {
      console.log("1");

      console.log(name);
      //切换标签页重新请求，参数咋取到时候看
      let ob = {
        planid: "1215890095745388546",
        contno: "0001912515081888",
        paytodate: "2020-06-13",
      };
      this.queryList(ob);
    },
    queryList(obj) {
      this.getTotal(obj);
    },
    async getTotal({ planid, contno, paytodate }) {
      let res = await this.api.careselectworkdetail({
        planid,
        contno,
        cvalidate: paytodate,
      });
      if (res.data) {
        this.historyCount = res.data.length;
      }
      //   this.serviceRecord = res.data
      let res2 = await this.api.careselectallworkdetail({ contno });
      this.serviceRecord = res2.data ? res2.data.allCareWorkdetail : [];
    },
    // 电话录音对话框点击显示
    async phoneRecordShow({ plainid, workid }) {
      let res = await this.api.recordingInfo({
        plainid,
        workid,
      });
      this.phoneRecordData = res.data;
      // console.log(this.phoneRecordData);
      this.phoneRecord = true;
    },
    // 对话框关闭
    modalVisibleChange3() {
      this.phoneRecord = false;
    },

    // 面访对话框显示
    async interviewShow({ plainid, workid }) {
      this.interviewData1 = [];
      this.interviewData2 = [];
      let res = await this.api.interviewPicturesInfo({
        plainid,
        workid,
      });
      this.interviewData = res.data;
      this.interviewData.forEach((item, index) => {
        let arr = item.path.split(".");
        let ext = arr[arr.length - 1];
        if (ext == "jpg" || ext == "png" || ext == "jpeg") {
          this.interviewData2.push(item);
        } else {
          this.interviewData1.push(item);
        }
      });
      console.log(this.interviewData);
      this.interviewModal = true;
    },
    biggerimg(url) {
      console.log(url);
      this.biggerFlag = true;
      this.biggerPath = url;
    },
    biggerimgclose() {
      this.biggerFlag = false;
    },
    async questionRecord({ planid, contno }) {
      (planid = planid ? planid : this.$route.query.planid),
        (contno = contno ? contno : this.$route.query.contno);
      window.open(
        "../rest/public/getSurveyPDF?" +
          "planid=" +
          planid +
          "&contno=" +
          contno
      );
    },
    modalVisibleChange6() {
      this.interviewModal = false;
      console.log(this.interviewModal, 1111111);
    },

    downloadPhoneRecord(id) {
      let obj = {
        id,
        worktype: "phone",
      };
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${row.id}&&worktype=phone`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    downloadInterview(id) {
      let obj = {
        id,
        worktype: "interview",
      };
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${id}&&worktype=interview`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
  },
  mounted() {
    // console.log("0");
    this.tabname = this.$route.query.contno;
    let obj = {
      planid: this.$route.query.planid,
      contno: this.$route.query.contno,
    };
    this.username = sessionStorage.getItem("name");
    this.queryList(obj);
  },
};
</script>
<style scoped lang="less">
.biggerShow /deep/.ivu-modal-content {
  background-color: rgba(131, 80, 80, 0);
}
</style>
<style>
/* @import "@/views/businessManagement/workPool/index.less"; */
.ivu-upload-drag:hover {
  border: none;
}
.ivu-upload-drag {
  border: none;
}
.ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-modal-close .ivu-icon .ivu-icon-ios-close {
  color: #fff !important;
}
.ivu-modal-header p,
.ivu-modal-header-inner {
  color: white !important;
}
.modalTitle {
  margin-bottom: 10px;
}
.modalContent {
  font-size: 12px;
}
.modalContent .waiqin {
  border-radius: 12px;
  padding-left: 10px;
  padding-right: 10px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  margin-right: 5px;
}
.modalContent .reasonDetail {
  margin-top: 8px;
}
.modalContent .reasonBtn {
  font-size: 12px;
  margin-left: 10px;
  color: #ff8d1a;
  border: #ff8d1a solid 1px;
  border-radius: 0;
  height: 20px;
  line-height: 20px;
}
.imgmodal {
  display: flex;
  overflow-x: scroll;
}
.recordcon {
  width: 200px;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  margin-right: 20px;
}
.imgout {
  width: 180px;
  height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.recordimg {
  width: 180px;
}
.recordimgname {
  width: 180px;
  height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.maskshow {
  display: flex;
  justify-content: center;
}
.biggerimgshow {
  height: 100vh;
  max-width: 100%;
}
</style>
